<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chart {
            width: 600px;
            height: 400px;
            outline: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <button>更新数据</button>

    <script src="./echarts.min.js"></script>
    <script>
        // 初始化图表容器
        const chartDOM = document.querySelector('#chart');
        const chart = echarts.init(chartDOM);

        // 配置项
        const config = {
            // x轴
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            // y轴
            yAxis: {
                type: 'value'
            },
            // 系列
            // 数组项表示的是一组数据（一根折线，一组柱图）
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line',
                },
            ],
        };

        // 导入配置项
        chart.setOption(config);

        function update () {
            config.series[0].data = config.series[0].data.map(function (item) {
                const n = Math.random() * 50;
                const op = Math.random() > .5 ? 1 : -1;
                return item + op * n;
            });
            chart.setOption(config);
        }

        document.querySelector('button').addEventListener('click', update);

        let timer = setInterval(update, 1000);

        // 鼠标移入 停止更新数据
        chartDOM.addEventListener('mouseover', function () {
            clearInterval(timer);
        });
        // 移出恢复
        chartDOM.addEventListener('mouseout', function () {
            timer = setInterval(update, 1000);
        });

    </script>
</body>
</html>
